import React, { useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { Link } from 'react-router-dom'
import { Alert } from 'antd'
import { PublicService } from '../../../transfer/service/PublicService'

export default function JoinForm() {
    const [userName, setUserName] = useState('')
    const [email, setEmail] = useState('')
    const [account, setAccount] = useState('')
    const [password, setPassword] = useState('')
    const [isError, setIsError] = useState(false)

    const join = () => {
        const emailPattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        const accountPattern = /^[a-z0-9_]+$/
        const passwordPattern = /^[A-Za-z0-9]{6,40}$/

        if (!emailPattern.test(email) || !accountPattern.test(account) || !passwordPattern.test(password)) {
            setIsError(true)
        }

        if (
            userName != '' &&
            emailPattern.test(email) &&
            accountPattern.test(account) &&
            passwordPattern.test(password)
        ) {
            new PublicService().join({
                username: account,
                email: email,
                password: password,
                profile: {
                    nickName: userName,
                    avatar: 'images/avatar/1A00E31C5A6D2B9C57323CF1B0BB37D74EA9427A.jpg',
                    location: '',
                    intro: '',
                    personalSite: ''
                }
            })
        }
    }

    return (
        <div className={style.container}>
            {isError ? (
                <Alert
                    message={'错误'}
                    description={'信息填写错误'}
                    type={'error'}
                    showIcon={true}
                    closable={true}
                    afterClose={() => {
                        setIsError(false)
                    }}
                    style={{
                        position: 'fixed'
                    }}
                />
            ) : (
                ''
            )}
            <div className={style.content}>
                <span className={style.title}>加入 LineView</span>
                <span className={style.sub__title}>
                    已经有一个账号了？ <Link to={'/account/login'}>登录</Link>
                </span>
                <div className={style.form}>
                    <div className={style.item}>
                        <span>用户名</span>
                        <input
                            type="text"
                            value={userName}
                            onChange={e => {
                                setUserName(e.target.value)
                            }}
                        />
                    </div>
                    <div className={style.item}>
                        <span>邮箱</span>
                        <input
                            type="text"
                            value={email}
                            onChange={e => {
                                setEmail(e.target.value)
                            }}
                        />
                    </div>
                    <div className={style.item}>
                        <span>账号</span>
                        <input
                            type="text"
                            placeholder={'只有小写字母、数字和下划线'}
                            value={account}
                            onChange={e => {
                                setAccount(e.target.value)
                            }}
                        />
                    </div>
                    <div className={style.item}>
                        <span>密码</span>
                        <div className={style.password}>
                            <input
                                type="password"
                                placeholder={'最少6个字符'}
                                value={password}
                                onChange={e => {
                                    setPassword(e.target.value)
                                }}
                            />
                        </div>
                    </div>
                    <div
                        className={style.btn}
                        onClick={() => {
                            join()
                        }}>
                        <span>加入</span>
                    </div>
                </div>
                <p>
                    加入即表示您同意 <Link to={'#'}>条款</Link> 和 <Link to={'#'}>隐私政策</Link> 。
                </p>
            </div>
        </div>
    )
}
